<template>
  <div class="h-[47vh]">
    <CommonCard title="预警情况统计">
      <template #content>
        <div>
          <div class="flex justify-between">
            <div class="text-[14px] text-[#6e7079]">预警设备占比</div>
            <TabBox :tab-list="tabList" @tab-handle="tabHandle" />
          </div>
          <div class="flex gap-3 w-5/6">
            <div
              :id="`xyCChart${index}`"
              v-for="(item, index) in devList"
              :key="index"
              class="w-[150px] h-[150px]"
            ></div>
          </div>

          <div class="flex w-full gap-2">
            <div ref="zxChart" class="w-1/2 h-[180px]"></div>
            <div ref="zzChart" class="w-1/2 h-[180px]"></div>
          </div>
        </div>
      </template>
    </CommonCard>
  </div>
</template>
<script lang="ts" setup>
import { deviceProp, getgroupByHour, warningDeviceTypeCount } from '@/api/home'
import CommonCard from '@/components/CommonCard.vue'
import TabBox from '@/components/TabBox.vue'
import { useCommonStore } from '@/stores/common'
import { deviceObj, timeNum } from '@/utils/commonFn'
import * as echarts from 'echarts'
import { markRaw, onMounted, onUnmounted, ref, watch } from 'vue'
const tabList = ref<CommonTypes.tabList[]>([
  {
    value: 'day',
    name: '本日'
  },
  {
    value: 'month',
    name: '本月'
  }
])
const zxChart = ref()
const zzChart = ref()
const zxChartBox = ref()
const zzChartBox = ref()
const timer = ref()
const tabActive = ref()
const devList = ref([])
onMounted(() => {
  zxChartBox.value = markRaw(echarts.init(zxChart.value))
  zzChartBox.value = markRaw(echarts.init(zzChart.value))
  initEchart()
  getxyCharts()
  timer.value = setInterval(() => {
    initEchart()
    restDomChart()
  }, timeNum)
})

onUnmounted(() => {
  clearInterval(timer.value)
})
const tabHandle = (e: CommonTypes.tabList) => {
  tabActive.value = e.value
  console.log(e)
  restDomChart()
}
const xyCChartoption = ref<echarts.EChartsOption>({
  series: [
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: false,
        clip: false,
        width: 18,
        itemStyle: {
          color: '#21cba7'
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },

      data: [
        {
          value: 0,
          detail: {
            offsetCenter: ['0%', '10%']
          }
        }
      ],
      detail: {
        formatter: '',
        rich: {
          num: {
            color: '#fff',
            fontSize: 26,
            fontFamily: 'Bebas',
            align: 'center'
          },
          name: {
            color: '#8d92a0',
            fontSize: 12,
            align: 'center'
          }
        }
      }
    }
  ]
})
const zxChartoption = ref<echarts.EChartsOption>({
  xAxis: {
    type: 'category',
    data: []
  },

  yAxis: {
    name: '预警频次',
    type: 'value',
    splitLine: {
      //坐标轴在grid区域中的分割线
      show: true,
      lineStyle: {
        color: '#51586c',
        type: 'dashed'
      }
    }
  },
  grid: {
    left: 0,
    right: 0,
    bottom: 0,
    top: 30,
    containLabel: true //是否包含坐标值
  },
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      data: [],
      type: 'line',
      symbol: 'circle',
      symbolSize: 0,
      smooth: true,
      color: '#048BFF',
      areaStyle: {}
    }
  ]
})
const zzChartoption = ref<echarts.EChartsOption>({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    name: '        预警设备次数',
    type: 'value',
    splitLine: {
      //坐标轴在grid区域中的分割线
      show: true,
      lineStyle: {
        color: '#51586c',
        type: 'dashed'
      }
    }
  },
  grid: {
    left: 0,
    right: 0,
    bottom: 0,
    top: 30,
    containLabel: true //是否包含坐标值
  },
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      data: [120, 200, 150, 500, 70, 110, 130],
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: 'rgba(33,203,167,0.1)' }, // 起点颜色
          { offset: 1, color: ' #21CBA7' } // 结束颜色
        ])
      }
    }
  ]
})
const formData = ref({
  institutionId: sessionStorage.getItem('institutionId')
})
watch(
  () => useCommonStore().institutionId,
  (value) => {
    formData.value.institutionId = value
    initEchart()
    getxyCharts()
    setTimeout(() => {
      restDomChart()
    }, 600)
  }
)
const initEchart = async () => {
  // 预警设备次数
  const res: any = await warningDeviceTypeCount(formData.value)
  let zzxData: string[] = []
  let zzydata: string[] = []
  res.data.forEach((item: any) => {
    zzxData.push(deviceObj[item.deviceType])
    zzydata.push(item.count)
  })
  let zzobj: any = zzChartoption.value
  zzobj.xAxis.data = zzxData as never
  zzobj.series[0].data = zzydata as never
  zzChartBox.value.setOption(zzChartoption.value)
  // 预警频次
  const res1: any = await getgroupByHour(formData.value)
  let zxxData: string[] = []
  let zxydata: string[] = []

  res1.data.forEach((item: any) => {
    zxxData.push(item.date)
    zxydata.push(item.count)
  })
  let zxobj: any = zxChartoption.value
  zxobj.xAxis.data = zxxData as never
  zxobj.series[0].data = zxydata as never
  zxChartBox.value.setOption(zxChartoption.value)

  window.onresize = function () {
    zxChartBox.value.resize()
    zzChartBox.value.resize()
  }
}
const getxyCharts = async () => {
  const xyRes = await deviceProp({
    type: tabActive.value,
    institutionId: formData.value.institutionId
  })
  console.log(xyRes)
  devList.value = xyRes?.data
  setTimeout(() => {
    let total = 0
    devList.value.forEach((item: any, index: number) => {
      let dom = document.getElementById(`xyCChart${index}`)
      let xyCChartBox = echarts.init(dom)
      let obj: any = xyCChartoption.value
      item.dom = xyCChartBox
      total += item.count
      console.log(total)

      obj.series[0].data[0].value = item.count * 100
      obj.series[0].detail.formatter = `{num|{value}%}\n{name|${deviceObj[item.deviceType]}}`
      xyCChartBox.setOption(xyCChartoption.value)
      window.onresize = function () {
        xyCChartBox.resize()
      }
    })
  }, 500)
}
const restDomChart = async () => {
  const xyRes = await deviceProp({
    type: tabActive.value,
    institutionId: formData.value.institutionId
  })
  devList.value = xyRes?.data

  devList.value.forEach((item: any) => {
    console.log(item, '123')
    let obj: any = xyCChartoption.value
    obj.series[0].data[0].value = item.count
    obj.series[0].detail.formatter = `{num|{value}%}\n{name|${deviceObj[item.deviceType]}}`
    item.dom.setOption(xyCChartoption.value)
  })
}
</script>

<style scoped></style>
